<template>
  <template v-for="item in RouterList">
    <!-- 没有孩子的路由 -->
    <template v-if="!item.children">
      <el-menu-item :index="item.path" v-if=!item.meta.hidden  @click="GoRoute">
        <el-icon>
              <component :is="item.meta.icon"/>
        </el-icon>
        <template #title>
          <span>{{ item.meta.title }}</span>
        </template>
      </el-menu-item>
    </template>

    <!-- 有且只有一个孩子的路由 -->
    <template v-if="item.children && item.children.length === 1">
      <el-menu-item :index="item.children[0].path" v-if=!item.children[0].meta.hidden  @click="GoRoute">
        <el-icon>
              <component :is="item.children[0].meta.icon"/>
        </el-icon>
        <template #title>
          <span>{{ item.children[0].meta.title }}</span>
        </template>
      </el-menu-item>
    </template>

    <!-- 有且大于一个的子路由 -->
    <template v-if="item.children && item.children.length > 1">
      <el-sub-menu :index="item.path" v-if=!item.meta.hidden  >
        <template #title>
          <el-icon>
                <component :is="item.meta.icon"/>
          </el-icon>
          <span>{{ item.meta.title }}</span>
        </template>
        <item :RouterList="item.children"></item>
      </el-sub-menu>
    </template>
  </template>
</template>

<script setup lang="ts" name="Item">
import { useRouter } from 'vue-router';
const router=useRouter()
defineProps(['RouterList'])

const GoRoute=(value: any)=>{
      // console.log(value);
    router.push(value.index)
}
</script>

<style scoped>

</style>
